| [
Graph Home ] [ Set-Up
] [ Tutorials ] [
Documentation
] [
Buy Now ] [
Support ] |
Bubble Chart for PHP
Documentation
- Full Parameter Reference
|
 |
|
|
There are many configurable options
for the graphing software. This section describes
each parameter and it's effect in detail.
With the exception of 2 parameters,
all of the following are optional and if not supplied
the graph will automatically calculate the values.
The only 2
parameters which must be supplied in all cases
are width and height.
|
| General Graph
Properties |
|
| Parameter Name |
Range of Values |
Example |
| width |
integer value
Specifies the width in pixels |
width: 300 |
| height |
integer value
Specifies the height in pixels |
height: 400 |
| ndecplaces |
integer value
Specifies the number of decimal places to use when displaying values |
ndecplaces: 2 |
| thousandseparator |
Any character symbol. |
thousandseparator: , |
| backgroundcolor |
Color definition (see Colors»)
general background color of the graph image |
backgroundcolor: white |
| displayvalues |
True or False
specifies whether actual values should be displayed at the top of each point |
displayvalues: false |
| bgimage |
URL to an Image file
specifies an image to used as the background |
bgimage: brimage.gif |
| quality |
Valid values are:-
low
medium
high
very high
The specifies how much image processing is to be applied in order to 'smooth-out' the bubbles.
( only available if the PHP environment is running with GD 2 or higher)
more info»
|
quality: medium |
| transparency: |
Integer value between 0 and 127.
This value specifies the transparency of the bubbles so that where bubbles overlap the underlying bubble
may still be seen.
0 represents totally opaque whilst 127 represents totally transparent. A good value for this parameter
is 40.
( only available if the PHP environment is running with GD 2 or higher)
more info»
|
transparency: 40 |
«back to top
|
|
| Grid Properties |
| Parameter Name |
Range of Values |
Example |
| grid |
True or False
specifies whether to draw grid lines or not |
grid: true |
| axis |
True or False
specifies whether to draw axis lines or not |
axis: |
| nrows |
integer value
number of grid rows |
nrows: 10 |
| hspace |
integer value
space in pixels of each grid column |
hspace: 30 |
| vspace |
integer value
space in pixels of each grid row |
vspace: 30 |
| gridstyle |
valid values are:-
solid
dashed
dotted
long dashed
dotted dashed
specifies the line style of the grid lines
|
gridstyle: dotted |
| gridcolor |
Color definition (see Colors»)
Grid line color |
gridcolor: #888888 |
| axiscolor |
Color definition (see Colors»)
Axis line color |
axiscolor: #000000 |
| gridbgimage |
URL to an Image file
specified an image to used as the grid background |
gridbgimage: brimage.gif |
| gridbgcolor |
Color definition (see Colors»)
the background color of the grid area |
gridbgcolor: light grey |
| gridposition |
an x,y, position
specifies the position of the bottom left of the grid |
gridposition: 30,275 |
| gridlineh |
True or False
specifies whether to draw horizontal grid lines or not |
gridlineh: false |
| gridlinev |
True or False
specifies whether to draw vertical grid lines or not |
gridlinev: false |
| gridbgcolor2 |
Color definition (see Colors»)
specifies a second background color of the grid area. If this parameter is specified then grid rows are
colored alternating between this color and gridbgcolor |
gridbgcolor2: grey |
«back to top
|
|
| Scale Properties |
|
AutoScale function.
If any of the following scale parameters are not supplied then the graphing software will automatically calculate
the scale from the data supplied. Therefore if you would like the scale to be calculated automatically then
simply ommit the following parameters from the configuration.
| Parameter Name |
Range of Values |
Example |
| chartscale |
Numeric Value
specifies the value the each grid row is to represent on the left hand axis |
chartscale: 1000 |
| chartstarty |
Numeric Value
specifies the starting value for the left hand axis |
chartstarty: 0 |
| chartscale2 |
Numeric Value
specifies the value the each grid row is to represent on the right hand axis |
chartscale2: 20 |
| chartstarty2 |
Numeric Value
specifies the starting value for the right hand axis |
chartstarty2: 500 |
| chartscalex |
Numeric Value
specifies the value the each grid column is to represent on the left hand axis |
chartscalex: 1000 |
| chartstartx |
Numeric Value
specifies the starting value for the bottom x-axis |
chartstartx: 0 |
| chartscalex2 |
Numeric Value
specifies the value the each grid column is to represent on the top x-axis axis |
chartscalex2: 20 |
| chartstartx2 |
Numeric Value
specifies the starting value for the top x-axis |
chartstartx2: 0 |
| maxbubblesize |
Numeric Value
specifies the diameter in pixels of the largest bubble. All other bubbles are scaled to this parameter |
maxbubblesize: 40 |
«back to top
|
|
| Legend Properties |
| Parameter
Name |
Range
of Values |
Example |
| legend |
True or False
determines whether the graph legend
should be drawn or not |
legend:
true |
| legendstyle |
horizontal or vertical
specifies whether the legend should
be horizontal or vertical |
legendstyle:
horizontal |
| legendbgcolor |
Color definition
(see
Colors»)
background color of the legend
area |
legendbgcolor:
white |
| legendbordercolor |
Color definition
(see
Colors»)
border color of the legend |
legendbordercolor:
light blue |
| legendtextcolor |
Color definition
(see
Colors»)
text color of the legend |
legendtextcolor:
black |
| legendtitle |
Text
legend title. leave blank if no
title required. |
legendtitle:
The Legned |
| legendposition |
X,Y position
position of the legend. |
legendposition:
50,50 |
| legendfont |
Font Definition :-
small
medium
medium bold
large
large bold
|
legendfont:
medium |
«back to top
|
|
| X-Axis Labels |
| Parameter Name |
Range of Values |
Example |
| xlables |
True or False
determines whether x-axis labels should be drawn or not |
xlables: true |
| xfont |
Font Definition :-
small
medium
medium bold
large
large bold
|
xfont: medium |
| xlabelcolor |
Color definition (see Colors»)
bottom x-axis label text color |
xlabelcolor: black |
| x2labelcolor |
Color definition (see Colors»)
top x-axis label text color |
x2labelcolor: red |
| xlabelpre |
Character or Text
leading character or text for each bottom x-axis label |
xlabelpre: $ |
| xlabelpost |
Character or Text
trailing character or text for each bottom x-axis label |
xlabelpost: kph |
| x2labelpre |
Character or Text
leading character or text for each top x-axis label |
x2labelpre: £ |
| x2labelpost |
Character or Text
trailing character or text for each top x-axis label |
x2labelpost: Kg |
«back to top
|
|
| Y-Axis Labels |
| Parameter
Name |
Range
of Values |
Example |
| ylables |
True or False
determines whether y-axis labels
should be drawn or not |
ylables:
true |
| yfont |
Font Definition :-
small
medium
medium bold
large
large bold
|
yfont:
medium |
| ylabelcolor |
Color definition
(see
Colors»)
left hand y-axis label text color |
ylabelcolor:
black |
| y2labelcolor |
Color definition
(see
Colors»)
right hand y-axis label text color |
y2labelcolor:
red |
| ylabelpre |
Character or Text
leading character or text for
each left hand label |
ylabelpre:
$ |
| ylabelpost |
Character or Text
trailing character or text for
each left hand label |
ylabelpost:
kph |
| y2labelpre |
Character or Text
leading character or text for
each right hand label |
y2labelpre:
£ |
| y2labelpost |
Character or Text
trailing character or text for
each right hand label |
y2labelpost:
Kg |
«back to top
|
|
| Graph Titles |
|
| Parameter Name |
Range of Values |
Example |
| titletext |
Text
Main graph title |
titletext: Graph Title |
| titlefont |
Font Definition :-
small
medium
medium bold
large
large bold
|
titlefont: large bold |
| titlecolor |
Color definition (see Colors»)
text color |
titlecolor: purple |
| titleposition |
X,Y Position
position of the title |
titleposition: 100,20 |
| |
|
|
| xtitletext |
Text
x-axis title |
xtitletext: X Title |
| xtitlefont |
Font Definition :-
small
medium
medium bold
large
large bold
|
xtitlefont: medium bold |
| xtitlecolor |
Color definition (see Colors»)
text color |
xtitlecolor: blue |
| xtitleposition |
X,Y Position
position of the x-axis title |
xtitleposition: 150,350 |
|
|
|
| x2titletext |
Text
top x-axis title |
x2titletext: X2 Title |
| x2titlefont |
Font Definition :-
small
medium
medium bold
large
large bold
|
x2titlefont: medium bold |
| x2titlecolor |
Color definition (see Colors»)
text color |
x2titlecolor: blue |
| x2titleposition |
X,Y Position
position of the top x-axis title |
x2titleposition: 150,350 |
|
|
|
| ytitletext |
Text
left hand y-axis title |
ytitletext: Left Y Title |
| ytitlefont |
Font Definition :-
small
medium
medium bold
large
large bold
|
ytitlefont: medium bold |
| ytitlecolor |
Color definition (see Colors»)
text color |
ytitlecolor: dark green |
| ytitleposition |
X,Y Position
position of the left hand y-axis title |
ytitleposition: 10,150 |
|
|
|
| y2titletext |
Text
right hand y-axis title |
y2titletext: Right Y Title |
| y2titlefont |
Font Definition :-
small
medium
medium bold
large
large bold
|
y2titlefont: medium bold |
| y2titlecolor |
Color definition (see Colors»)
text color |
y2titlecolor: red |
| y2titleposition |
X,Y Position
position of the right hanf y-axis title |
y2titleposition: 300,150 |
«back to top
|
|
| Series Specifications |
|
Seven parameters may be supplied for each series of data. These are:-
Series Color
Legend Text
axis scale (left/bottom or right/top)
Point Size
Point Style
Point Fill (true or false)
Point Style - valid values are :-
- "point"
- "circle"
- "cross"
- "pluscross"
- "xcross"
- "box"
- "triangle"
- "diamond"
- "hexagon"
The format of the series parameter is:-
| seriesN: color | text | scale | size | pt style
| fill |
where N represents the series number
For example if there are 2 series of data with the first using the left hand scale and the second using the
right hand scale, the series parameter would be:-
series1: pink|Series One|left|6|triangle|true|
series2: blue|Series Two|left|4|circle|true| |
For more further information on the color element please see Colors»
«back to top
|
|
| Target Lines |
|
Any number of horizontal target line
may be added to the chart with the
parameter "target".
The target parameter is made up of
6 elements:-
y value
color
text
font
line style
y-axis scale (left or right)
The format of the target line parameter
is:-
| target:
value | color | text | font |
line Style | scale| |
For more on color defintions see
Colors»
The font defintion can be one of:-
small
medium
medium bold
large
large bold
The line style can be one of:-
solid
dashed
dotted
long dashed
dotted dashed
For example to set a target line
at a value of 1000 on the chart,
| target:
1000|green|Break Even|medium|dashed|left| |
«back to top
|
|
| Trend Lines |
|
Any number of trend lines may be
added to the chart with the parameter
"trend".
The trend parameter is made up of
9 elements:-
start y value
start column
end value
end column
color
text
font
line style
y axis scale (left or right)
The format of the target line parameter
is:-
| trend: start y value|start column|end value|end
column|color|text|font|line Style|scale| |
For more on color defintions see
Colors»
The font defintion can be one of:-
small
medium
medium bold
large
large bold
The line style can be one of:-
solid
dashed
dotted
long dashed
dotted dashed
For example to set a trend line starting
at a value of 1000 in column 2 and
ending at a value of 1550 in column
6,
| trend:
1000|2|1550|6|green|Up Trend|medium|dashed|left |
«back to top
|
|
| Free Form
Text |
|
In addition to the standard titles,
any number of lines of text may be
added to the graph using the "text"
parameter.
The text parameter is consists of
4 elements:-
text
font
color
position
The format of the text parameter
is:-
| text:
text | font | color | position
| |
For more on color defintions see
Colors»
The font defintion can be one of:-
small
medium
medium bold
large
large bold
For example if 3 lines of text were
to be added the following parameters
would be included in the configuration:-
text:
line one of text|medium|#000000|50,50|
text: line two of text|medium|#000000|50,65|
text: line three of text|medium|#000000|50,80|
|
«back to top
|
|
| Free Form
Images |
|
Any number of images may be added
to the graph using the "image"
parameter.
The image parameter is consists of
2 elements:-
URL or Filename
of an image file
position
The format of the image parameter
is:-
| image:
URL or filename | position | |
For example if an image "logo.png"
was to be drawn on the graph image
then the following parameter would
be included in the configuration:-
«back to top
|
|
|
|
|
|
| [
Graph Home ] [ Set-Up
] [ Tutorials ] [
Documentation
] [
Buy Now ] [
Support ] |
|
|
[
